<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Create Event</title>
        <link rel="stylesheet" href="css/mycss.css" type="text/css"></link>
    </h:head>

    <body style="background-color:#F0FFFF"></body>

    <h:body>
        <h:form prependId="false">
            <em><font size="7"><h:outputText style="color: orange; position: absolute; 
                                             top: 30px; left: 60px;" value="Create Event Form"/></font></em>    

            <h:panelGrid columns="3" id="regGrid" style="position: absolute; top: 100px; left: 60px;">

                <h:outputLabel for="name" style="font: 24px/26px colibri">Name:</h:outputLabel>
                <p:inputText id="name"  value="#{createBean.event.eventname}">
                    <p:ajax update="namemsg"/>
                </p:inputText>
                <p:message id="namemsg" for="name" />

                <h:outputLabel for="city" style="font: 24px/26px colibri">City</h:outputLabel>
                <p:inputText id="city" value="#{createBean.event.city}">
                    <p:ajax update="citymsg"/>
                </p:inputText>
                <p:message id="citymsg" for="city" />

                <h:outputLabel for="place" style="font: 24px/26px colibri">Place:</h:outputLabel>
                <p:inputText id="place" value="#{createBean.event.place}">
                    <p:ajax update="placemsg"/>
                </p:inputText>
                <p:message id="placemsg" for="place" />

                <h:outputLabel for="date" style="font: 24px/26px colibri">Date (DD/MM/YYY):</h:outputLabel>
                <p:inputMask id="date" value="#{createBean.event.eventdate}" mask="99/99/9999">
                    <p:ajax update="placemsg"/>
                </p:inputMask>
                <p:message id="datemsg" for="date" />

                <h:outputLabel for="timestart" style="font: 24px/26px colibri">Start Time</h:outputLabel>
                <p:inputText id="timestart" value="#{createBean.event.timestart}">
                    <p:ajax update="timestartmsg"/>
                </p:inputText>
                <p:message id="timestartmsg" for="timestart" />

                <h:outputLabel for="timefinish" style="font: 24px/26px colibri">End Time</h:outputLabel>
                <p:inputText id="timefinish" value="#{createBean.event.timefinish}">
                    <p:ajax update="timefinishtmsg"/>
                </p:inputText>
                <p:message id="timefinishtmsg" for="timefinish" />

                <h:outputLabel for="type" style="font: 24px/26px colibri">Type:</h:outputLabel>
                <h:selectOneMenu id="type" value="#{createBean.event.eventtype}" required="true" label="type" style="width:120px; height:30px; font: 18px/20px colibri">
                    <f:selectItem itemLabel="Select Type" itemValue="" noSelectionOption="true" />
                    <f:selectItem itemLabel="Indoor" itemValue="Indoor" />
                    <f:selectItem itemLabel="Outdoor" itemValue="Outdoor" />
                </h:selectOneMenu><br/>


                <h:outputLabel for="visibility" style="font: 24px/26px colibri">Visibility:</h:outputLabel>
                <h:selectOneMenu id="visibility" value="#{createBean.event.visibility}" required="true" label="visibility" style="width:150px; height:30px; font: 18px/20px colibri">
                    <f:selectItem itemLabel="Select Visibility" itemValue="" noSelectionOption="true" />
                    <f:selectItem itemLabel="Public" itemValue="Public" />
                    <f:selectItem itemLabel="Private" itemValue="Private" />
                </h:selectOneMenu><br/>

                <h:outputLabel for="inviteone" style="font: 24px/26px colibri">Invite User 1:</h:outputLabel>
                <p:inputText id="inviteone" value="#{createBean.invited1}"/><br/>

                <h:outputLabel for="inviteone" style="font: 24px/26px colibri">Invite User 2:</h:outputLabel>
                <p:inputText id="invitetwo" value="#{createBean.invited2}"/><br/>

                <h:outputLabel for="inviteone" style="font: 24px/26px colibri">Invite User 3:</h:outputLabel>
                <p:inputText id="invitethree" value="#{createBean.invited3}"/><br/>

            </h:panelGrid>

            <p:commandButton value="Create Event" update="regGrid" style="position: absolute; top: 515px;
                             left: 60px; background-color:#90A4FD" action="#{createBean.saveEvent()}" />

            <p:commandButton immediate="true" value="Back" style="position: absolute; top:515px;
                             left: 260px; background-color: #90A4FD" action="#{counter.count()}"/>

        </h:form>
    </h:body>
</html>